<template>
	<view>
		<view class="top">
			<view style="height:calc(var(--status-bar-height) + 40px)"></view>
			<text @tap="shezhi" style="float: right;margin-right: 28rpx;;color: #535bb4;font-size: 60rpx;" class="iconfont">&#xe649;</text>
			
			<view class="user row" @tap="mydata">
				<image :src="url + user.avatar" mode="aspectFill"></image>
				<view style="margin-top: -30rpx;">
					<text style="background-image: linear-gradient(to right ,#c63d7a,#9B63FF,#c63d7a); -webkit-background-clip: text; -webkit-text-fill-color: transparent;font-size: 40rpx;">{{user.name}}</text>
					<text v-if="vip!=1" style="color: #A2A1A1;font-size: 30rpx;">用户等级:普通用户</text>
					<text v-if="vip==1" style="color: #eb96ed;font-size: 30rpx;">用户等级:会员用户</text>
					<text v-if="vip==1" style="color: #888686;font-size: 30rpx;">开通日期:{{gettime(vipstart,'yyyy-MM-dd')}}</text>
				</view>
			</view>

			<!--<view  class="usertg row" @tap="ntourl('../vip/vip')">-->
				<view  class="usertg row" @tap="vips">
				<text >
					<image style="height:30px;width:100rpx;" src="../../static/font/vipa.png"></image>
				</text>
                <text style="color: #eb96ed;">开通会员</text>
				<text>即刻尊享万部大片！</text>
				
			</view>
		</view>

	<view >
		<!--<text style="font-size: 35rpx;font-weight: 700;margin: 40rpx;line-height: 70rpx;">账户数据</text>-->
		
		<view class="views row" >
			<view class="hengv" @tap="ntourl('wallet/wallet')"> 
				<text class="fonts" style="font-size: 32rpx;">{{parseFloat(user.money).toFixed(2)}}</text>
				<text class="fontss">账户余额</text>
			</view>
			<view  class="hengv" @tap="ntourl('../extension/profitdetails/profitdetails')">
				<text class="fonts" style="font-size: 32rpx;">{{$store.state.integral}}</text>
				<text class="fontss">佣金收益</text>
			</view>
			<view class="hengv" @tap="ntourl('record/record')">
				<text class="fonts" style="font-size: 32rpx;">{{$store.state.record.length}}</text>
				<text class="fontss">观看记录</text>
			</view>
			<view class="hengv" @tap="ntourl('myfollow/myfollow')">
				<text class="fonts" style="font-size: 32rpx;">{{$store.state.follow.length}}</text>
				<text class="fontss">我的收藏</text>
			</view>
		</view>	
		</view>	


		<view class="tool">
			<text class="cygn">常用功能</text>
		<view class="view2  row row2">
			<view @tap="ntourl('../vip/card')">
				<text style="color: #4A519A;font-size: 60rpx;" class="iconfont">&#xe6a4;</text>
				<text>卡密激活</text>
			</view>
			<view  @tap="ntourl('wallet/diamond/buydiamond')">
				<text style="color: #4A519A;font-size: 60rpx;" class="iconfont">&#xe648;</text>
				<text>卡密冲钻</text>
			</view>
			<!--<view  @tap="ntourl('wallet/diamond/diamond')">
				<image style="width: 65rpx;height: 65rpx;" src="../../static/wode/zuanshi.png" mode=""></image>
				<text>钻石充值</text>
			</view>-->
			<view  @tap="zuanshi">
				<text style="color: #4A519A;font-size: 60rpx;" class="iconfont">&#xe817;</text>
				<text>钻石充值</text>
			</view>
		
			<view  @tap="ntourl('wallet/diamond/exchange')">
				<text style="color: #4A519A;font-size: 60rpx;" class="iconfont">&#xe647;</text>
				<text>钻石兑换</text>
			</view>
			
			<view @tap="ntourl('../add/index')">
				<text style="color: #4A519A;font-size: 60rpx;" class="iconfont">&#xe66c;</text>
				<text>发布视频</text>
			</view>

		
			<view  @tap="ntourl('myvideo')">
				<text style="color: #4A519A;font-size: 60rpx;" class="iconfont">&#xe641;</text>
				<text>我的视频</text> 
			</view>
			<view  @tap="ntourl('../extension/extension')">
				<text style="color: #4A519A;font-size: 60rpx;" class="iconfont">&#xe642;</text>
				<text>推广中心</text>
			</view>
			<view  @tap="ntourl('wallet/withdraw/withdraw')">
				<text style="color: #4A519A;font-size: 60rpx;" class="iconfont">&#xe63f;</text>
				<text>申请提现</text>
			</view>
		</view>
		</view>	
		
		
	    <view class="bottombg">
		<view class="sbottom" @tap="ntourl('myfollow/myguanzhu')" hover-class="click-hover" hover-stay-time="80">
				<text style="color: #4A519A;font-size: 45rpx;padding-top: 22rpx;" class="iconfont">&#xe703;</text>
				<text class="cdlist">我的关注</text>
				<text class="iconfont dlist">&#xe625;</text>
			</view>
        <view class="sbottom" @tap="ntourl('wallet/withdrawalrecord/withdrawalrecord')" hover-class="click-hover" hover-stay-time="80">
			<text style="color: #4A519A;font-size: 45rpx;padding-top: 22rpx;" class="iconfont">&#xe645;</text>
			<text class="cdlist">提现记录</text>
			<text class="iconfont dlist">&#xe625;</text>
		</view>
        <view class="sbottom"  @tap="ntourl('wallet/diamonddetails/diamonddetails')"  hover-class="click-hover" hover-stay-time="80">
			<text style="color: #4A519A;font-size: 45rpx;padding-top: 22rpx;" class="iconfont">&#xe648;</text>
			<text class="cdlist" >钻石明细</text>
			<text class="iconfont dlist">&#xe625;</text>
		</view>
		<view class="sbottom" @tap="ntourl('wallet/baobiao')"  hover-class="click-hover" hover-stay-time="80">
			<text style="color: #4A519A;font-size: 45rpx;padding-top: 22rpx;" class="iconfont">&#xe64d;</text>
			<text class="cdlist">收益报表</text>
			<text class="iconfont dlist">&#xe625;</text>
		</view>
		<view class="sbottom" @tap="ntourl('wallet/giftrecord/giftrecord')" hover-class="click-hover" hover-stay-time="80">
			<text style="color: #4A519A;font-size: 45rpx;padding-top: 22rpx;" class="iconfont">&#xe66b;</text>
			<text class="cdlist">打赏记录</text>
			<text class="iconfont dlist">&#xe625;</text>
		</view>
		
		</view>

	</view>
	
</template>

<script> 
	export default {
		data() {
			return {
				data:'',
				rdata:null,
				//#ifdef H5
				user:null,
				//#endif
			}
		},
		computed:{
			//#ifdef APP-PLUS
			user(){
				return this.$store.state.Login ? this.$store.state.userinfo : {};
			},
			//#endif
			oimg(){
				return JSON.parse(this.$store.state.config.oimg);
			},
			follownum(){
				return this.$store.state.follow.length;
			},
			vip(){
				return this.$store.state.vip;
			},
			vipstart(){
				return this.$store.state.vipstart;
			},
			recordnum(){
				return this.$store.state.record.length;
			}
		},
		onShow() {
			//#ifdef H5
			uni.getStorage({
				key:'userinfo',
				success: (e) => {
					let sign = this.md5(e.data.token);
					this.GetJson(this.ip + 'userinfo.php','POST',{
						token:e.data.token,
						sign:sign
					},e=>{
						if(e.code == 405 || e.userinfo == null || e.userinfo == ''){
							uni.removeStorage({key:'ulogin'})
							uni.reLaunch({url:'../login/login'})
						}
						if(this.isdata(e)){
							this.$store.state.userinfo = e.userinfo;
							this.$store.state.account = e.account;//提现账户
							this.$store.state.follow = e.follow;
							this.$store.state.dianzan = e.dianzan;
							this.$store.state.integral = e.integral;
					       this.user = e.userinfo;
					       this.integral = e.integral;
					       this.follow = e.follow;
					   }
					})
				}  
			})
			//#endif
			
			let token = this.$store.state.userinfo.token
			this.GetJson(this.ip + 'uservip.php','POST',{
				token: token
			},e=>{
				if(e.code == 405 || e.userinfo == null || e.userinfo == ''){
					uni.removeStorage({key:'ulogin'})
					uni.reLaunch({url:'../login/login'})
				}
				
				if(this.isdata(e)){
					this.$store.state.userinfo = e.userinfo;
					this.$store.state.account = e.account;//提现账户
				    this.$store.state.user = e.userinfo;
					this.$store.state.vipstart = e.vipstart;
					
					if(this.$store.state.vip == 0 && e.vip == 1) {
						uni.showToast({
							title: '开通成功',
						});
					}
					this.$store.state.vip = e.vip;
			   }
			})
		},
		onLoad(){
				
		},
		methods: {
			vips(){
				uni.navigateTo({
					url:'../vip/view?url='+this.ip+'vip/index.php?userid='+this.$store.state.userinfo.userid
					//url:'../vip/vip' //支付宝微信支付
				})
			},
			zuanshi(){
				uni.navigateTo({
					url:'../vip/view?url='+this.ip+'zuanshi/index.php?userid='+this.user.userid
				})
			},
			mydata(){
				console.log(32323)
				uni.navigateTo({
					url:'../mydata/mydata'
				})
			},
			shezhi(){
				uni.navigateTo({
					url:'../shezhi/shezhi'
				})
			},
			ntourl(item){
				uni.navigateTo({
					url:item
				})
			},

		}
	}
</script>

<style>
	page{
		background-image: url(../../static/wode/topbg.jpg);
		background-size: cover;
		background-color: #181b2e;
		padding-bottom: 16rpx;
	}
	.top{
		width: 750rpx;
		position: relative;
		height: calc(400rpx + var(--status-bar-height));
		background-size: cover;
		padding: 0 46rpx; 
		animation: opacitys .3s;
	}
	.top>image{
		width: 40rpx;
		height: 38rpx;
		float: right;
		margin-right: 28rpx;
	}
	 .cdlist{
		 margin-left: 20rpx;
		 font-size: 28rpx;
		 font-weight: 600;
		 padding-top: 30rpx;
		 color: #4A519A
	 }
	 .dlist{
	 	color: #4A519A;
	 	padding-top: 35rpx;
	 	margin-left: 400rpx;
	 }
	 .fonts{
		background-image: linear-gradient(to right ,#c63d7a,#9B63FF);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	 }
	 .fontss{
	 		background-image: linear-gradient(to right ,#992fca,#8010b4);
	 		-webkit-background-clip: text;
	 		-webkit-text-fill-color: transparent;
	 }
	 
	 .sbottom{
		 margin: 20rpx;
		 height: 100rpx;
		 box-shadow: 0rpx 1rpx 0rpx 0rpx #262a47;
		 display: flex;
	 }
	 .abottom{
	 	margin: 20rpx;
	 	height: 100rpx;
	 	display: flex;
	 }
	 .imgs{
		 margin: 20rpx;
		 width: 50rpx;
		 height: 50rpx;
	 }
	 .click-hover{
	 background-image: linear-gradient(to right ,#3f4776,#4a2a6b);
	 }

	.view {
		margin: 20rpx;
		border-radius: 20rpx;
		background-color: #FFFFFF;
		
	}

	.view>view {
		padding: 35rpx 42rpx;
		border-bottom: 1rpx solid var(--fenge);
		display: flex;
		flex-direction: row;
		align-items: center;
		color: rgba(225,225,225,1);
	}


	.view>view>text:nth-child(1) {
		font-size: 30rpx;
		color: rgba(225,225,225,0.8);
		display: flex;
		flex: 1;
	}
	

	.tool{
		
		background-color: rgba(0,0,0,0.15);
		margin: 20rpx;
		border-radius: 20rpx;
	}
	.views{
		margin: 20rpx;
		background-color: rgba(0,0,0,0.15);
		border-radius: 20rpx;
		margin-top: 15rpx;
		padding: 20rpx 0;
		justify-content: space-around;
	}
	.bottombg{
		background-color:rgba(0,0,0,0.15);
		margin: 20rpx;
		border-radius: 20rpx;
	}
	.cygn{
		color: #4A519A;
		font-size: 35rpx;
		font-weight: 700;
		margin: 30rpx;
		line-height: 100rpx;
	}
	.user{
		margin-top: 20rpx;
	}
	.user>image{
		width: 167rpx;
		height: 167rpx;
		margin-top: -40rpx;
		border-radius: 100rpx;
		margin-right: 42rpx;
		display: block;
	}
	.user>view{
		color: #FFFFFF;
	}
	.user>view>text:nth-child(1){
		font-size: 26rpx;
		font-weight: bold;
		display: block;
		margin-bottom: 5rpx;
	}
	.user>view>text:nth-child(2){
		display: block;
		font-size: 22rpx;
	}
	.user>view>text:nth-child(3){
		display: block;
		font-size: 22rpx;
	}
	.usertg{
		position: absolute;
		bottom: 0;
		left: 0;
		right: 19rpx;
		height: 100rpx;
		width: 750rpx;
		background-color: #000000;
		/*background-color: rgba(24, 24, 24,.8);*/
		border-radius: 25rpx 25rpx 0 0;
		padding: 0 40rpx;
	}
	.usertg>text:nth-child(1){
		font-size: 28rpx;
		color: #F5C71F;		
	}
	.usertg>text:nth-child(2){
		font-size: 35rpx;
		color: #F5C71F;
		font-weight: bold;
		margin-left: 10rpx;
		margin-right: 15rpx;
		display: block;
	}
	.usertg>text:nth-child(3){
		font-size: 25rpx;
		color: #FFFFFF;
		display: flex;
		flex: 1;
	}
	.usertg>text:nth-child(4){
		width: 119rpx;
		height: 32rpx;
		background: linear-gradient(-81deg, #FE6767, #FDA6A6);
		display: block;
		font-size: 16rpx;
		border-radius: 10rpx;
		text-align: center;
		line-height: 32rpx;
		color: #FFFFFF;
	}
	
	
	.newren{
		position: absolute;
		bottom: 0;
		left: 19rpx;
		right: 19rpx;
		height: 100rpx;
		
		background-color: #000000;
		/*background-color: rgba(24, 24, 24,.8);*/
		border-radius: 20rpx 20rpx 0 0;
		padding: 0 40rpx;
	}
	.newren>text:nth-child(1){
		font-size: 28rpx;
		color: #F5C71F;		
	}
	.newren>text:nth-child(2){
		font-size: 35rpx;
		color: #F5C71F;
		font-weight: bold;
		margin-left: 10rpx;
		margin-right: 15rpx;
		display: block;
	}
	.newren>text:nth-child(3){
		font-size: 25rpx;
		color: #FFFFFF;
		display: flex;
		flex: 1;
	}
	.newren>text:nth-child(4){
		width: 119rpx;
		height: 32rpx;
		background: linear-gradient(-81deg, #FE6767, #FDA6A6);
		display: block;
		font-size: 16rpx;
		border-radius: 10rpx;
		text-align: center;
		line-height: 32rpx;
		color: #FFFFFF;
	}

	.hengv{
		text-align: center;
	}
	.hengv>text:nth-child(1){
		font-size: 24rpx;
		font-weight: bold;
		color: #000000;
		display: block;
	}
	.hengv>text:nth-child(2){
		color: #504F4F;
		font-size: 24rpx;
	}
	.view2{
		margin-top: -30rpx;
		border-radius: 20rpx ;
		justify-content: space-around;
	}
	.view2>view{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.view2>view>image{
		width: 60rpx;
		height: 60rpx;
		display: block;
		margin-bottom: 13rpx;
	}
	.view2>view>text{
		font-weight: 500;
		font-size: 28rpx;
		color: #4A519A;
	}
	.view2>text{
		width: 0;
		display: block;
		border-right: 7rpx dashed #ddd;
	}	
	.view3{
		margin-top: -30rpx;
		background-size: 100% 100%;
		/*background-color: #FFFFFF;*/
		border-radius: 20rpx;
		justify-content: space-around;
	}	
	.view3>view{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.view3>view>image{
		width: 50rpx;
		height: 50rpx;
		display: block;
		margin-bottom: 13rpx;
	}
	.view3>view>text{
		font-size: 25rpx;
		color: #504F4F;
	}
	.view3>text{
		width: 0;
		height: 77rpx;
		display: block;
		border-right: 7rpx dashed #ddd;
	}
	
	
	.guangg{
		width: 717rpx;
		height: 169rpx;
		border-radius: 20rpx;
		display: block;
		margin: 14rpx 19rpx;
	}
	.row2{
		flex-wrap: wrap;
		padding: 20rpx 0;
	}
	.row2>view{
		width: 25%;
		margin-bottom: 20rpx;
	}
	.row2>view>image{
		width: 70rpx;
		height: 70rpx;
	}
	.row3{
		flex-wrap: wrap;
		padding: 20rpx 0;
	}
	.row3>view{
		width: 20%;
		margin-bottom: 20rpx; 
	}
	.row3>view>image{
		width: 50rpx;
		height: 50rpx;
	}	
	
</style>
